<template>
  <div class="wrapper">
    <h1>使用以下方式付款：</h1>
    <ul>
      <li @click="isPopupZFBShow = true">
        <span class="iconfont iconzhifubao"></span>
        支付宝付款
      </li>
      <li @click="isPopupWeChartShow = true">
        <span class="iconfont iconpy_weixinzhifu"></span>
        微信付款
      </li>
      <li @click="$commonJs.goPage('shoppingPay')">
        <span class="iconfont iconkuaijiezhifu"></span> 快捷支付
      </li>
    </ul>
    <md-popup v-model="isPopupZFBShow">
      <div class="md-example-popup md-example-popup-center">
        支付宝付款二维码
        <div
          id="zfb"
          class="QRCodeStyle"
          ref="qrcode"
          style="width: 132px; margin: 20px auto"
        ></div>
        <p class="hintMsg">注：该付款码不支持长按扫码支付！</p>
      </div>
    </md-popup>
    <md-popup v-model="isPopupWeChartShow">
      <div class="md-example-popup md-example-popup-center">
        微信付款二维码
        <div
          id="weChart"
          class="QRCodeStyle"
          ref="qrcode"
          style="width: 132px; margin: 20px auto"
        ></div>
        <p class="hintMsg">注：该付款码不支持长按扫码支付！</p>
      </div>
    </md-popup>
  </div>
</template>

<script>
import { Popup } from "mand-mobile";
import QRCode from "qrcodejs2";
export default {
  name: "index",
  components: {
    [Popup.name]: Popup
  },
  data() {
    return {
      payImg: "",
      zfbImg: "",
      isPopupZFBShow: false,
      isPopupWeChartShow: false
    };
  },
  methods: {
    // 绘制二维码
    drawQrcode(id, url) {
      new QRCode(id, {
        width: 132,
        height: 132,
        text: url, // 二维码地址
        colorDark: "#000",
        colorLight: "#fff"
      });
    },
    getQRCode(msg) {
      let data = {
        order_num: this.order.order_num,
        type: msg
      };
      this.$ajax
        .post(this.$api.payOffLine, data)
        .then(res => {
          if (msg === "W01") {
            this.payImg = res.data.url;
            this.drawQrcode("zfb", this.payImg);
          } else {
            this.zfbImg = res.data.url;
            this.drawQrcode("weChart", this.zfbImg);
          }
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    }
  },
  mounted: function() {
    this.getQRCode("A01");
    this.getQRCode("W01");
  },
  computed: {
    order() {
      return this.$store.state.order;
    }
  }
};
</script>

<style scoped lang="stylus">
  .wrapper{
    background #ffffff
    margin-top 14px
    height calc(100% - 14px)
    h1{
      font-size:26px;
      font-family:PingFang-SC-Regular;
      font-weight:400;
      color:rgba(51,51,51,1);
      padding 28px 24px 42px 28px
    }
  }
ul{
  font-size:26px;
  font-family:PingFang-SC-Regular;
  font-weight:400;
  color:rgba(51,51,51,1)
  li{
    box-shadow: 0 0 10px rgba(216, 216, 216, 0.6);
    padding 22px 44px
    .iconzhifubao{
      color: #00AAEF
    }
    .iconpy_weixinzhifu{
      color: #24A838
    }
    .iconkuaijiezhifu{
      color: #D52C3C
    }
  }
}
.iconfont{
  font-size 54px
  margin-right 31px
  display inline-block
  vertical-align: middle;
}
  .hintMsg{
    font-size 18px
    color color-primary
  }
  .md-example-popup
    position relative
    font-size 28px
    font-family DINPro
    font-weight 500
    box-sizing border-box
    text-align center
    background-color #FFF
    padding: 40px 50px
    border-radius 15px
</style>
